<template>
  <div class="persion">
    <el-card style="width:600px;">
      <div slot="header">
        <span style="font-size:24px;">
          <b>个人中心</b>
        </span>
        <el-button type="text" style="color:#000000;margin-left:400px;" @click="updateUser()">完善信息</el-button>
        <el-button type="text" style="color:#000000;margin-left:500px;" @click="changepassword()">修改密码</el-button>
      </div>
      <div class="persionContain">
        <div style="margin-bottom:20px;">
          <b style="margin-right:100px;">用户名：</b>
          {{persionData.userUsername}}
        </div>
        <div style="margin-bottom:20px;">
          <b style="margin-right:85px;">真实姓名：</b>
          {{persionData.userName}}
        </div>
        <div style="margin-bottom:20px;">
          <b style="margin-right:85px;">身份证号：</b>
          {{persionData.userCard}}
        </div>
        <div style="margin-bottom:20px;">
          <b style="margin-right:85px;">银行卡号：</b>
          {{persionData.userBankCard}}
        </div>
        <div style="margin-bottom:20px;">
          <b style="margin-right:112px;">地 址：</b>
          {{persionData.userAddress}}
        </div>
        <div>
          <b style="margin-right:85px;">联系电话：</b>
          {{persionData.userPhone}}
        </div>
      </div>
      <el-dialog title="请输入你要编辑的内容" width="40%" :visible.sync="dialogUserForm">
        <el-form ref="form" :model="updateUserForm" label-width="90px">
          <el-form-item label="用户名">
            <el-input v-model="updateUserForm.userUsername" clearable></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="updateUserForm.userName" clearable></el-input>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input v-model="updateUserForm.userCard" clearable></el-input>
          </el-form-item>
          <el-form-item label="银行卡号">
            <el-input v-model="updateUserForm.userBankCard" clearable></el-input>
          </el-form-item>
          <el-form-item label="地 址">
            <el-input v-model="updateUserForm.userAddress" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="updateUserForm.userPhone" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <div style="float:right;">
              <el-button @click="btnNot()" class="btnNot">取 消</el-button>
              <el-button type="warning" @click="updateUserTo()">确 认</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-divider></el-divider>
       <el-dialog title="请修改密码" width="40%" :visible.sync="dialogChangeForm">
        <el-form ref="form" :model="updateChangeForm" label-width="90px">
          <el-form-item label="新密码" prop="userPassword">
        <el-input
          type="password"
          v-model="updateChangeForm.userPassword"
          autocomplete="on"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="checkuserPassword">
        <el-input
          ref="password"
          type="password"
          v-model="updateChangeForm.checkuserPassword"
          autocomplete="on"
        ></el-input>
          </el-form-item>
          <el-form-item>
            <div style="float:right;">
              <el-button @click="btnNot()" class="btnNot">取 消</el-button>
              <el-button type="warning" @click="updateChangeTo()">确 认</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
       <el-divider></el-divider>
      <div>
        <b>收货地址</b>
        
        <div v-for="(item,index) in userAddressList" :key="index">
          <div style="margin-bottom:20px;">
            <b style="margin-right:115px;">地址{{index+1}}:</b>
            {{item.addressName}} - {{item.addressPhone}} - {{item.addressContent}}
          </div>
        </div>
        <el-button
          type="text"
          style="color:#000000;margin-left:430px;"
          @click="addressRegist()"
        >添加地址</el-button>
      </div>
      <el-dialog title="请输入你要编辑的内容" width="40%" :visible.sync="dialogAddressForm">
        <el-form ref="form" :model="addressForm" label-width="90px">
          <el-form-item label="姓名">
            <el-input v-model="addressForm.addressName" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="addressForm.addressPhone" clearable></el-input>
          </el-form-item>
          <el-form-item label="新增地址">
            <el-input v-model="addressForm.addressContent" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <div style="float:right;">
              <el-button @click="btnNot()" class="btnNot">取 消</el-button>
              <el-button type="warning" @click="addressRegistTo()">确 认</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
     const validatePassword1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.updateChangeForm.userPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      dialogUserForm: false,
      dialogChangeForm: false,
			dialogAddressForm: false,

      updateChangeForm:{
        userPassword:"",
      },
      updateUserForm: {
        userUsername: "",
        userAddress: "",
        userName: "",
        userCard: "",
        userBankCard: "",
        userPhone: ""
      },
      addressForm: {
        addressContent: "",
        addressName: "",
        addressPhone: ""
      },
      persionData: {
        userUsername: "123",
        userAddress: "122",
        userName: "1212",
        userCard: "1231",
        userBankCard: "32131",
        userPhone: "213123"
      },
      userAddressList: [],
      formRules: {
       
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
        checkuserPassword: [
          { required: true, trigger: "blur", validator: validatePassword1 },
        ],
      
      }
    };
  },
  methods: {
		btnNot() {
			this.dialogUserForm = false;
			this.dialogAddressForm = false;
      this.dialogChangeForm= false;
		},
    changepassword(){
      this.dialogChangeForm=true
    },
    updateChangeTo(){
     let that = this;
		 let userId = JSON.parse(localStorage.getItem("user")).userId;
    that.$axios
        .post("/user/userUpdateByPassword?userId=" + userId + "userPassword" + that.updateChangeForm.userPassword, {}
        ).then(function(response) {
					console.log(response);
					alert("修改成功！");
					window.location.reload(true);
        })
        .catch(function(error) {
          console.log(error);
        });

    },
    updateUser() {
      let that = this;
      that.dialogUserForm = true;
      let userId = JSON.parse(localStorage.getItem("user")).userId;
       that.$axios
        .post("/user/queryUserInfo?userId="  + userId, {
      	})
        .then(function(response) {
          that.updateUserForm=response.data.data;
        })
        .catch(function(error) {
          console.log(error);
        });

    },
    updateUserTo() {
      let that = this;
			let userId = JSON.parse(localStorage.getItem("user")).userId;
      console.log(that.updateUserForm)
      that.$axios
        .post("/user/userUpdateAll", {
					userId: userId,
      		userAddress: that.updateUserForm.userAddress,
      		userBankCard: that.updateUserForm.userBankCard,
      		userCard: that.updateUserForm.userCard,
      		userName: that.updateUserForm.userName,
      		userPhone: that.updateUserForm.userPhone,
      		userUsername: that.updateUserForm.userUsername
      	})
        .then(function(response) {
					console.log(response);
					alert("修改成功！");
					window.location.reload(true);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    addressRegist() {
      this.dialogAddressForm = true;
    },
    addressRegistTo() {
      let that = this;
      let userId = JSON.parse(localStorage.getItem("user")).userId;
      that.$axios
        .post("/address/addressRegist", {
      		"addressContent": that.addressForm.addressContent,
          "addressName":that.addressForm.addressName,
          "addressPhone":that.addressForm.addressPhone,
      		"userId": userId
      	})
        .then(function(response) {
					console.log(response);
					alert("修改成功！");
					window.location.reload(true);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    persionDataGet() {
      let that = this;
      let userId = JSON.parse(localStorage.getItem("user")).userId;
      that.$axios
        .post("/user/queryUserInfo?userId=" + userId, {})
        .then(function(response) {
          that.persionData = response.data.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    userAddressListGet() {
      let that = this;
      let userId = JSON.parse(localStorage.getItem("user")).userId;
      that.$axios
        .post("/address/queryAddressesInfoByUserId?userId=" + userId, {})
        .then(function(response) {
          that.userAddressList = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  created() {
    this.persionDataGet();
    this.userAddressListGet();
  }
};
</script>
<style scoped>
.persion {
  display: flex;
  justify-content: center;
}
</style>